{{ template "layout/base.html" . }}

{{define "head"}}
<title>OpenVPNAdmin</title>
<meta http-equiv="refresh" content="60">
{{end}}

{{define "body"}}

  <div class="row">
    <div class="col-md-3 col-sm-6 col-xs-12">
      <div class="info-box">
        <span class="info-box-icon bg-green">
          <i class="ion ion-network"></i>
        </span>
        <div class="info-box-content">
          <span class="info-box-text">
            Clients count: <span class="info-box-number2">{{ .ovstats.NClients }}</span>
          </span>
          <span class="info-box-text">
            In: <span class="info-box-number2">{{ printNetServer .ovstats.BytesIn }} MB</span>
          </span>
          <span class="info-box-text">
            Out: <span class="info-box-number2">{{ printNetServer .ovstats.BytesOut }} MB </span>
          </span>
        </div>
        <!-- /.info-box-content -->
      </div>
      <!-- /.info-box -->
    </div>
    <!-- /.col -->

    <div class="col-md-3 col-sm-6 col-xs-12">
      <div class="info-box">
        <span class="info-box-icon bg-aqua">
          <i class="ion ion-ios-pulse"></i>
        </span>
        <div class="info-box-content">
          <span class="info-box-text">Load Average:</span>
          <span class="info-box-number">
            {{ .sysinfo.LoadAvg.One }},
            {{ .sysinfo.LoadAvg.Five }},
            {{ .sysinfo.LoadAvg.Fifteen }}<br/>
            </span>
          <span class="info-box-text">
            CPU count: <span class="info-box-number2">
              {{ .sysinfo.CPUList.List | len }}
            </span>
          </span>
        </div>
        <!-- /.info-box-content -->
      </div>
      <!-- /.info-box -->
    </div>
    <!-- /.col -->

    <!-- fix for small devices only -->
    <div class="clearfix visible-sm-block"></div>

    <div class="col-md-3 col-sm-6 col-xs-12">
      <div class="info-box">
        <span class="info-box-icon bg-orange">
          <i class="ion ion-arrow-graph-up-right"></i>
        </span>
        <div class="info-box-content">
          <span class="info-box-text">OS uptime:</span>
          <span class="info-box-number">{{ .sysinfo.UptimeS }}</span>
        </div>
        <!-- /.info-box-content -->
      </div>
      <!-- /.info-box -->
    </div>
    <!-- /.col -->

    <div class="col-md-3 col-sm-6 col-xs-12">
      <div class="info-box">
        <span class="info-box-icon bg-yellow">
          <i class="fa ion-ios-clock-outline"></i>
        </span>
        <div class="info-box-content">
          <span class="info-box-text">
            Server time:
          </span>
          <span class="info-box-number">
              {{ dateformat .sysinfo.CurrentTime "2006-01-02 15:04:05"}}
          </span>
        </div>
        <!-- /.info-box-content -->
      </div>
      <!-- /.info-box -->
    </div>
    <!-- /.col -->


  </div>
<!-- /.row -->

<div class="box box-default">
  <div class="box-header with-border">
    <h3 class="box-title">Memory Usage</h3>
  </div>
  <div class="box-body">
    <div class="col-md-6">
      <div class="progress-group">
        <span class="progress-text">Memory</span>
        <span class="progress-number">
          <b>{{ printMemory .sysinfo.MemUsed }}</b>
          /
          {{ printMemory .sysinfo.MemTotal }} MB
          - {{percent .sysinfo.MemUsed .sysinfo.MemTotal}}%
        </span>
        <div class="progress sm">
          <div class="progress-bar progress-bar-aqua"
            style="width: {{percent .sysinfo.MemUsed .sysinfo.MemTotal}}%"></div>
        </div>
      </div>
    </div>
    <!-- /.col -->
    <div class="col-md-6">
      <div class="progress-group">
        <span class="progress-text">Swap</span>
        <span class="progress-number">
          <b>{{ printMemory .sysinfo.SwapUsed }}</b>
          /
          {{ printMemory .sysinfo.SwapTotal }} MB
          - {{percent .sysinfo.SwapUsed .sysinfo.SwapTotal}}%
        </span>

        <div class="progress sm">
          <div class="progress-bar progress-bar-red"
            style="width: {{percent .sysinfo.SwapUsed .sysinfo.SwapTotal}}%"></div>
        </div>
      </div>
    </div>
    <!-- /.col -->  </div>
  <!-- /.box-body -->
</div>

<div class="row">
  <div class="col-md-12">
    <div class="box box-default">
      <div class="box-header with-border">
        <h3 class="box-title">Connected Clients</h3>

      </div>
      <!-- /.box-header -->

      <div class="box-body">
        {{if .ovstatus}}
        <div class="table-responsive">
          <table class="table no-margin">
            <thead>
            <tr>
              <th>Common Name</th>
              <th>Real Address</th>
              <th>Virtual Address</th>
              <th>KB Received</th>
              <th>KB Sent</th>
              <th>Connected Since</th>
              <th>Username</th>
              <th></th>
            </tr>
            </thead>
            <tbody>

            {{range .ovstatus.ClientList}}
            <tr>
                <td>{{.CommonName}}</td>
                <td>{{.RealAddress}}</td>
                <td>
                  <span class="label label-success">{{.VirtualAddress}}</span>
                  <button class="button-copy" data-clipboard-text="{{.VirtualAddress}}">
                      <img class="clippy" src="/static/img/clippy.svg" width="13" alt="Copy to Clipboard" title="Copy to Clipboard">
                  </button>
                </td>
                <td align="right" style="padding-right:20px">
                    {{printNetClient .BytesReceived}}
                </td>
                <td align="right" style="padding-right:20px">
                    {{printNetClient .BytesSent}}
                </td>
                <td>{{.ConnectedSince}}</td>
                <td>
                  {{if eq .Username "UNDEF"}}
                    -
                  {{else}}
                    {{.Username}}
                  {{end}}
                </td>
                <td>
                  <a href="javascript:$.MyAPP.Disconnect('{{.CommonName}}')"
                    class="btn btn-xs btn-danger btn-flat"
                    title="Disconnect">X</a>
                </td>
            </tr>
            {{end}}

            </tbody>
          </table>
        </div>
        <!-- /.table-responsive -->
      {{else}}
          Fix your configuration
      {{end}}
      </div>
      <div class="box-footer clearfix">
      </div>
      <!--
      <div class="box-footer clearfix">
        <a href="javascript:void(0)" class="btn btn-sm btn-info btn-flat pull-left">Place New Order</a>
        <a href="javascript:void(0)" class="btn btn-sm btn-default btn-flat pull-right">View All Orders</a>
      </div>
    -->
      <!-- /.box-footer -->
    </div>
    <!-- /.box -->
  </div>
</div>
<!-- /.col -->
<!-- /.box-body -->

<div class="row">
  <div class="col-md-6 col-sm-12 col-xs-12">
    <div class="info-box">
      <span class="info-box-icon bg-white">
        <i class="ion ion-ios-information-empty"></i>
      </span>
      <div class="info-box-content">
      </span>
      <span class="info-box-text">
        OpenVPN version (2.5.x or higher required): <span class="info-box-number3">{{ .ovversion }}
      </span>
      </div>
      <!-- /.info-box-content -->
    </div>
    <!-- /.info-box -->
  </div>
  <!-- /.col -->

  <div class="col-md-6 col-sm-12 col-xs-12">
    <div class="info-box">
      <span class="info-box-icon bg-white">
        <i class="ion ion-ios-gear"></i>
      </span>
      <div class="info-box-content">
        <span class="info-box-text">Operating system (Debian, Ubuntu, Raspbian supported):</span>
        <span class="info-box-number3">{{ .sysinfo.Os }}</span>
        <span class="info-box-text">Architecture (amd64, arm64, armv7 supported): </span>
        <span class="info-box-number3">{{ .sysinfo.Arch }} </span>
      </div>
      <!-- /.info-box-content -->
    </div>
    <!-- /.info-box -->
  </div>
  <!-- /.col -->

  <!-- fix for small devices only -->
  <div class="clearfix visible-sm-block"></div>
  <!-- /.col -->
</div>
<!-- /.row -->

{{end}}

